<template>
  <a-modal
    title="新增敏感词校验"
    width="45%"
    :centered="true"
    wrapClassName="common_modal"
    v-model:open="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      ref="addFormRef"
      :model="formInfo"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item label="警告级别" name="warnLevel">
            <a-select v-model:value="formInfo.warnLevel" popupClassName="common_select_dropdown">
              <a-select-option
                v-for="item in props.warnLevelList"
                :value="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            label="敏感词汇"
            name="words"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <a-input v-model:value="formInfo.words" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="默认提示" name="warnMsg">
            <a-textarea v-model:value="formInfo.warnMsg" :rows="4" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注" name="remark">
            <a-textarea v-model:value="formInfo.remark" :rows="4" />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="扣分数" name="score">
            <a-input-number v-model:value="formInfo.score" :step="0.1" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { sensitiveWordSave } from '@/axios/api/valid_api'
import { addProps } from './props'
import { message } from 'ant-design-vue'
const emit = defineEmits(['getPage'])
const [messageApi] = message.useMessage()
const addFormRef = ref()
const props = defineProps(addProps)
const visible = ref(false)
const confirmLoading = ref(false)
const formInfo = ref({
  words: '',
  remark: '',
  warnLevel: '',
  warnMsg: '',
  score: 0
})
const rules = {
  warnLevel: [{ required: true, message: '请选择警告级别', trigger: ['change', 'blur'] }],
  words: [{ required: true, message: '请输入敏感词汇', trigger: ['change', 'blur'] }]
}

function showModal() {
  visible.value = true
}
function handleOk() {
  addFormRef.value.validate().then(() => {
    confirmLoading.value = true
    sensitiveWordSave(formInfo.value).then((res) => {
      if (res.code === 200) {
        messageApi.success(res.msg)
        emit('getPage')
        handleCancel()
      } else {
        confirmLoading.value = false
      }
    })
  })
}
function handleCancel() {
  visible.value = false
  confirmLoading.value = false
  formInfo.value = {
    words: '',
    remark: '',
    warnLevel: '',
    warnMsg: '',
    score: 0
  }
}
defineExpose({
  showModal
})
</script>
